<template>
  <el-container class="grid">
    <div v-for="(row, i) in squares" :key="i">
      <div v-for="(square, j) in row" :key="j" class="square" :style="{ backgroundColor: square.color}">
        <span style="font-size:xx-small;">{{ square.value }}</span>
      </div>
    </div>
  </el-container>
</template>



<script setup lang="ts">
import { ref, shallowRef, triggerRef, type ShallowRef } from 'vue';
import { generateSmoothGradientArray } from '@/utils';

interface TerrainData {
    ok: number,
    terrain: [
        {
            id: string,
            room: string,
            terrain: string,
            type: string
        }
    ]
}

//50*50的shallRef数组，每个元素是一个对象，包含color、dis、value三个属性
const squares: ShallowRef<{ color: string, dis: number, value: number }[][]> = shallowRef(Array.from({ length: 50 }));
for (let i = 0; i < 50; ++i) {
    squares.value[i] = new Array(50).fill({}).map((_,idx) => ({ color: '', dis: 0, value: Math.round(Math.random() * 100) }));
}

const colorArray = generateSmoothGradientArray(50, 50);
for (let i = 0; i < 50; ++i) {
    for (let j = 0; j < 50; ++j) {
        squares.value[i][j].color = colorArray[i][j];
    }
}

const getDate = async (url: string): Promise<TerrainData> => {
    console.log(url);
    const response = await fetch(url, {
        method: 'GET',
    });
    console.log(response);
    try {
        return await response.json() as TerrainData;
    } catch (error) {
        throw new Error(`Error while get data: ${error}`);
    }
};

const terrainColor = ['#9ea3a3','#1e1f22','#208e40','#1e1f22',];
const configSquaresColor = (data:number[][]) => {
    for (let i = 0; i < 50; ++i) {
        for (let j = 0; j < 50; ++j) {
            squares.value[i][j].color = terrainColor[data[i][j]];
        }
    }
    triggerRef(squares);
}

</script>
<style scoped>
.grid {
    display: flex;
    grid-template-columns: repeat(50, 5px);
    grid-template-rows: repeat(50, 5px);
    justify-content: center;
    align-items: center;
}

.square {
    width: 1fr;
    height: 1fr;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>